<template>
  <div class="app-container">
    <!--工具栏-->
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="checkPermission(['dataPush@index'])"
    >
      <el-form inline>
        <!-- 执行状态 -->
        <el-form-item :label="$t('notice.notice6')">
          <el-select
            v-model="formInline.status"
            :placeholder="$t('common.common7')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in statusData"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-button class="filter-item" type="primary" @click="toQuery">{{
          $t("common.common4")
        }}</el-button>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        :max-height="$store.state.app.tableHeight"
        v-permission="['dataPush@index']"
      >
        <el-table-column prop="id" width="100" fixed="left" label="ID" />
        <!-- 处理类名 -->
        <el-table-column
          prop="class"
          min-width="300"
          :label="$t('notice.notice1')"
        />
        <!-- 执行事件 -->
        <el-table-column
          prop="method"
          min-width="150"
          :label="$t('notice.notice2')"
        />
        <!-- 事件内容 -->
        <el-table-column
          prop="send_data"
          min-width="400"
          :label="$t('notice.notice3')"
        />
        <!-- 额外参数 -->
        <el-table-column
          prop="extra_param"
          min-width="200"
          :label="$t('notice.notice4')"
        />
        <!-- 响应状态码 -->
        <el-table-column
          prop="response_code"
          min-width="100"
          :label="$t('notice.notice5')"
        />
        <!-- 执行状态 -->
        <el-table-column
          prop="status"
          min-width="180"
          :label="$t('notice.notice6')"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{
              scope.row.status | release(statusData)
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column
          prop="created_at"
          min-width="150"
          :label="$t('vip.vip4')"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <!--   操作   -->
        <el-table-column
          :label="$t('common.common3')"
          min-width="120px"
          align="center"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['dataPush@repush', 'dataPush@delete'])"
        >
          <template slot-scope="scope">
            <span
              @click="chongfa(scope.row.id)"
              v-permission="['dataPush@repush']"
            >
              <!-- 重发 -->
              <btn-tip
                :content="$t('notice.notice7')"
                type="primary"
                icon="el-icon-refresh"
              ></btn-tip>
            </span>
            <span
              @click="delList(scope.row.id)"
              v-permission="['dataPush@delete']"
            >
              <!-- 删除 -->
              <btn-tip
                :content="$t('common.common9')"
                type="danger"
                icon="el-icon-delete"
              ></btn-tip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['dataPush@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
    <!--表单渲染-->
  </div>
</template>

<script>
import { getCusList, deleteItem, refreshItem } from "@/api/notice/index";
import { statusData } from "@/assets/js/common";
import { parseTime } from "@/utils/index";

export default {
  data() {
    return {
      statusData,
      loading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
      formInline: {
        status: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    parseTime,
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getCusList(
        Object.assign({}, this.formInline, {
          page: this.tableShow.currentPage,
          limit: this.tableShow.pageSize,
        })
      )
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    chongfa(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        // `确定对[id=${userIds.join(",")}]进行[${id ? "重发" : "批量重发"}]操作?`
        `${this.$t("common.common13")}[id=${userIds.join(",")}]${this.$t(
          "common.common14"
        )}[${
          id ? this.$t("notice.notice7") : this.$t("notice.notice10")
        }]${this.$t("common.common15")}?`,
        this.$t("notice.notice8"),
        // 确定重发？
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          refreshItem(userIds.join(",")).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消重发
            message: this.$t("notice.notice9"),
          });
        });
    },
    delList(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        // `确定对[id=${userIds.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`
        `${this.$t("common.common13")}[id=${userIds.join(",")}]${this.$t(
          "common.common14"
        )}[${
          id ? this.$t("common.common9") : this.$t("common.common12")
        }]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        // 确定删除？
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          deleteItem(userIds.join(",")).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>